import React from 'react'
import {connect} from 'react-redux'
// components
import CoinConsumeCard from "../../../../shared-components/CoinConsumeCard/CoinConsumeCard"

// mock data
import {coinConsumeList} from '../../../../utils/mockdata'

// antd-mobile
import {Toast, WhiteSpace, WingBlank} from "antd-mobile"
import FetchListComponent from "../../../../shared-components/FetchListComponent/FetchListComponent";
import LocalStorageService from "../../../../utils/LocalStorageService";

const uid = LocalStorageService.get('userid')
class CoinConsume extends React.Component {

    constructor(props) {
        super(props)
        this.list = this.props.user.depositList
        this.state = {
            p: 0,
            end: false,
        }
    }


    onTouchEnd = (e) => {

        const ctn = this.listCtn
        const last = ctn.lastElementChild
        const end = this.state.end
        const rect = last.getBoundingClientRect()
        const cH = document.documentElement.clientHeight
        const top = rect.top
        const endCallback = () => {
            Toast.info('已经没有数据了')
            this.setState({
                end: true,
            })
        }
        if (cH > top) {
            if (end) {
                Toast.info('已经没有数据了')
            } else {
                const cP = this.state.p
                const nP = cP + 1
                this.setState({
                    p: nP,
                })
                this.props.doDepositList({p: nP, uid, endCallback,})
            }
        }

    }

    render() {

        const list = this.props.user.depositList
        const fetchList = this.props.doDepositList
        const params = {p: this.state.p, uid: LocalStorageService.get('userid')}
        const unmountMethod = () => {
            this.props.doEmptyDepositList()
        }

        return <FetchListComponent
            fetchList={fetchList}
            params={params}
            list={list}
            unmountMethod={unmountMethod}
            render={list => {
                if (list.length === 0) {
                    return <div style={{textAlign: 'center', width: '100%', padding: '8px'}}><p>暂无数据</p></div>
                }
                return <div
                    ref={el => this.listCtn = el}
                    style={{padding: '15px'}}
                    onTouchEnd={e => this.onTouchEnd(e)}
                >
                    {list.map(order => {
                        return (
                            <div key={order.Dealno}>

                                <CoinConsumeCard
                                    order={order}
                                />

                            </div>
                        )
                    })}
                </div>
            }}
        />
    }


}
// const CoinConsume = (props) => {
//
//     const list = coinConsumeList
//     const fetchList = props.doFetchPayData
//     const params = {p: 0, uid: LocalStorageService.get('userid')}
//
//     return <FetchListComponent
//         fetchList={fetchList}
//         params={params}
//         list={list}
//         render={list => {
//             if (list.length === 0) {
//                 return null
//             }
//             return <WingBlank>
//                 {list.map(order => {
//                     return (
//                         <div key={order.orderId}>
//                             <WhiteSpace />
//                             <CoinConsumeCard
//                                 order={order}
//                             />
//                         </div>
//                     )
//                 })}
//             </WingBlank>
//         }}
//     />
//
//     const template = list.map(order => {
//         return (
//             <div key={order.orderId}>
//                 <CoinConsumeCard
//                     order={order}
//                 />
//                 <WhiteSpace />
//             </div>
//         )
//     })
//
//     return (
//         <div>
//             <WingBlank>
//                 <WhiteSpace />
//                 {template}
//             </WingBlank>
//         </div>
//     )
// }

const mapState = (state) => ({
    user: state.user,
})

const mapDispatch = (dispatch) => ({
    doDepositList: (payload) => dispatch.user.doDepositList(payload),
    doEmptyDepositList: () => dispatch.user.doEmptyDepositList(),
})

export default connect(mapState, mapDispatch)(CoinConsume)
